<template>
  <div class="app-container">
    <el-form ref="formData" :model="formData" label-width="100px" size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目模块" required>
            <!-- <el-cascader v-model="formData.projectModules" :options="projectList" placeholder="请选择项目模块" clearable /> -->
            <el-select v-model="formData.moduleId" placeholder="请选择模块">
              <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-radio-group v-model="formData.isAutoId" @change="changeAutoId">
              <el-radio-button :label="true">自增ID</el-radio-button>
              <el-radio-button :label="false">自定义ID</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="栏" required>
            <el-select v-model="formData.rowCol" placeholder="栏" size="mini" clearable>
              <el-option :value="0" label="无" />
              <el-option :value="2" label="2栏" />
              <!-- <el-option :value="4" label="4栏" /> -->
            </el-select>
            <el-tooltip content="状态status字段" placement="top">
              <el-checkbox v-model="formData.hasStatus" label="状态字段" border style="margin:0" @change="chgStatus" />
            </el-tooltip>
            <el-tooltip content="版本号version字段" placement="top">
              <el-checkbox v-model="formData.hasVersion" label="版本号" border style="margin:0" @change="chgVersion" />
            </el-tooltip>
            <el-tooltip content="后端自动加上创建者字段" placement="top">
              <el-checkbox v-model="formData.hasCreateBy" label="创建者" border style="margin:0" />
            </el-tooltip>
            <el-tooltip content="后端自动加上修改者字段" placement="top">
              <el-checkbox v-model="formData.hasUpdateBy" label="修改者" border style="margin:0" />
            </el-tooltip>
            <el-tooltip content="后端自动加上修改时间字段" placement="top">
              <el-checkbox v-model="formData.hasUpdateTime" label="修改时间" border style="margin:0" />
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数据表名" required>
            <el-input v-model="formData.name" placeholder="请输入表名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表注释" required>
            <el-input v-model="formData.cmmt" placeholder="请输入表注释" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="表功能" required>
        <el-select v-model="formData.genFileArr" placeholder="生成文件列表" style="width:35%" multiple clearable>
          <el-option v-for="(item, index) in vues" :key="index" :value="item" :label="item" />
        </el-select>
        <el-radio-group v-model="formData.isTree">
          <el-radio-button :label="true">树形</el-radio-button>
          <el-radio-button :label="false">非树形</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="formData.isPerm">
          <el-radio-button :label="true">权限控制</el-radio-button>
          <el-radio-button :label="false">不控制</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="formData.isExport">
          <el-radio-button :label="true">导出</el-radio-button>
          <el-radio-button :label="false">不导出</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="formData.isImport">
          <el-radio-button :label="true">导入</el-radio-button>
          <el-radio-button :label="false">不导入</el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="formData.hasAction">
          <el-radio-button :label="true">有操作</el-radio-button>
          <el-radio-button :label="false">无操作</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--自动生成编辑代码结束-->
    </el-form>
    <el-tabs size="mini">
      <el-tab-pane label="字段" size="mini">
        <el-button size="small" type="primary" icon="el-icon-edit" @click="onAdd('columnList')">新增</el-button>
        <el-button size="small" type="primary" icon="el-icon-edit" @click="onOpenIndex('columnList')">在第几行新增</el-button>
        <el-button size="small" type="success" icon="el-icon-edit" @click="onAllEdit(formData.columnList)">全部编辑</el-button>
        <br><br>
        <!--字段基础属性-->
        <el-table v-loading="loading" :data="formData.columnList" element-loading-text="载入中..." size="mini" border fit highlight-current-row>
          <el-table-column label="名字">
            <template slot-scope="scope">
              <el-input v-if="scope.row._edit_" v-model="scope.row.name" :disabled="scope.row.disable && scope.$index != 0" placeholder="字段名" size="mini" clearable />
              <div v-else>{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column label="注释">
            <template slot-scope="scope">
              <el-input v-if="scope.row._edit_" v-model="scope.row.cmmt" :disabled="scope.row.disable" placeholder="字段注释" size="mini" clearable />
              <div v-else>{{ scope.row.cmmt }}</div>
            </template>
          </el-table-column>
          <!-- 类型和表单类型改成String类型，数据一看就懂 -->
          <el-table-column label="类型" width="150px">
            <template slot-scope="scope">
              <div v-if="scope.row._edit_">
                <el-select v-if="scope.row.name === 'status'" v-model="scope.row.type" placeholder="字段类型" size="mini" filterable @change="chgType(scope.row)">
                  <el-option :value="1" label="String" />
                  <el-option :value="3" label="Integer" />
                </el-select>
                <el-select v-else v-model="scope.row.type" :disabled="scope.row.disable" placeholder="字段类型" size="mini" filterable @change="chgType(scope.row)">
                  <el-option :value="1" label="String" />
                  <el-option :value="2" label="Boolean" />
                  <el-option :value="3" label="Integer" />
                  <el-option :value="4" label="Long" />
                  <el-option :value="5" label="Float" />
                  <el-option :value="6" label="Double" />
                  <el-option :value="7" label="Decimal" />
                  <el-option :value="8" label="DateTime" />
                  <el-option :value="11" label="Date" />
                  <el-option :value="9" label="Text" />
                  <el-option :value="10" label="Blob" />
                </el-select>
              </div>
              <div v-else>
                <span v-if="scope.row.type == 1">String</span>
                <span v-if="scope.row.type == 2">Boolean</span>
                <span v-if="scope.row.type == 3">Integer</span>
                <span v-if="scope.row.type == 4">Long</span>
                <span v-if="scope.row.type == 5">Float</span>
                <span v-if="scope.row.type == 6">Double</span>
                <span v-if="scope.row.type == 7">Decimal</span>
                <span v-if="scope.row.type == 8">DateTime</span>
                <span v-if="scope.row.type == 11">Date</span>
                <span v-if="scope.row.type == 9">Text</span>
                <span v-if="scope.row.type == 10">Blob</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="长度" width="100px">
            <template slot-scope="scope">
              <el-select v-if="scope.row._edit_" v-model="scope.row.length" :disabled="scope.row.disable && scope.row.name !== 'status'" placeholder="长度" size="mini" filterable allow-create default-first-option clearable>
                <el-option v-for="(item, index) in lengths" :key="index" :value="item" :label="item" />
              </el-select>
              <div v-else>{{ scope.row.length }}</div>
            </template>
          </el-table-column>
          <el-table-column label="小数点后" width="70px">
            <template slot-scope="scope">
              <el-input v-if="scope.row._edit_ && scope.row.type == 7" v-model="scope.row.dotRight" :disabled="scope.row.disable" size="mini" />
              <div v-else>{{ scope.row.dotRight }}</div>
            </template>
          </el-table-column>
          <el-table-column label="无符号" width="70px">
            <template slot-scope="scope">
              <el-switch v-if="scope.row._edit_ && scope.row.type >= 3 && scope.row.type <= 7" v-model="scope.row.unsigned" :disabled="scope.row.disable" active-color="#13ce66" inactive-color="#ff4949" />
              <div v-else>{{ scope.row.unsigned ? '是' : '否' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="非null" width="65px">
            <template slot="header">
              <el-tooltip content="not null" placement="top"><span>非null</span></el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-switch v-if="scope.row._edit_" v-model="scope.row.notNull" :disabled="scope.row.disable" active-color="#13ce66" inactive-color="#ff4949" @change="chgNull(scope.row)" />
              <div v-else>{{ scope.row.notNull ? '是' : '否' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="默认值" width="105px">
            <template slot-scope="scope">
              <!-- <el-input v-model="scope.row.defVal" :disabled="scope.row.disable" size="mini" clearable /> -->
              <el-select v-if="scope.row._edit_" v-model="scope.row.defVal" :disabled="scope.row.disable && scope.row.name != 'status'" placeholder="默认值" size="mini" filterable clearable allow-create>
                <el-option :value="'空'" label="空" />
                <el-option :value="0" label="0" />
                <!-- <el-option :value="1" label="NULL" /> -->
                <el-option :value="1" label="1" />
                <el-option :value="'NOW'" label="NOW" />
              </el-select>
              <div v-else>{{ scope.row.defVal }}</div>
            </template>
          </el-table-column>
          <el-table-column label="关联表" width="150px">
            <template slot="header">
              <el-tooltip content="这个设置后可以在[页面]那里选择[选择器]" placement="top"><span>关联表</span></el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-select v-if="scope.row._edit_ && showLink(scope.row)" v-model="scope.row.linkTableId" :disabled="scope.row.disable" placeholder="级联表" size="mini" filterable clearable @change="chgLink(scope.row)">
                <el-option v-for="item in tableList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <div v-else>{{ getTableName(tableList, scope.row.linkTableId) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="关联保存" width="70px">
            <template slot="header">
              <el-tooltip content="这个设置后关联对象自动保存" placement="top"><span>关联保存</span></el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-switch v-if="scope.row._edit_ && (!!scope.row.linkTableId || scope.row.type == 4)"
                v-model="scope.row.linkSave" :disabled="!scope.row.linkTableId" active-color="#13ce66" inactive-color="#ff4949" />
              <div v-else>{{ scope.row.linkSave ? '是' : '' }}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="查询类型" width="120px">
            <template slot="header">
              <el-tooltip content="设置查询类型后，请合理增加索引" placement="top"><span>查询类型</span></el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-select v-if="scope.row._edit_" v-model="scope.row.queryType" :disabled="scope.row.disable" size="mini" clearable>
                <el-option :value="1" label="普通" />
                <el-option :value="2" label="模糊" />
                <el-option :value="3" label="后模糊" />
                <el-option :value="4" label="范围无边界" />
                <el-option :value="5" label="范围含边界" />
              </el-select>
              <div v-else>
                <span v-if="scope.row.queryType == 1">普通</span>
                <span v-if="scope.row.queryType == 2">模糊</span>
                <span v-if="scope.row.queryType == 3">后模糊</span>
                <span v-if="scope.row.queryType == 4">范围无边界</span>
                <span v-if="scope.row.queryType == 5">范围含边界</span>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="操作" width="220px" fixed="right">
            <template slot-scope="scope">
              <el-button-group>
                <el-button v-if="!scope.row._edit_" type="success" size="mini" @click="scope.row._edit_ = true">编辑</el-button>
                <el-button v-else type="primary" size="mini" @click="scope.row._edit_ = false">关闭</el-button>
                <el-button :disabled="scope.row.disable" type="danger" size="mini" @click="onDelete(formData.columnList, scope.$index)"><i class="el-icon-close" /></el-button>
                <el-button :disabled="scope.row.disable" type="success" size="mini" @click="onUp(formData.columnList, scope.$index)"><i class="el-icon-top" /></el-button>
                <el-button :disabled="scope.row.disable" type="primary" size="mini" @click="onDown(formData.columnList, scope.$index)"><i class="el-icon-bottom" /></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="页面">
        <!--字段页面属性-->
        <el-table v-loading="loading" :data="formData.filterColumnList" element-loading-text="载入中..." size="mini" border fit highlight-current-row>
          <el-table-column label="名字" width="220px">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="验证函数" width="150px">
            <template slot="header">
              <el-tooltip content="暂时未支持" placement="top"><span>验证函数</span></el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-select v-if="scope.row._edit_" v-model="scope.row.validFun" :disabled="scope.row.disable" placeholder="验证函数" size="mini" allow-create clearable>
                <el-option v-for="(item, index) in valids" :key="index" :value="item" :label="item" />
              </el-select>
              <div v-else>{{ scope.row.validFun }}</div>
            </template>
          </el-table-column> -->
          <el-table-column label="限制集合">
            <template slot-scope="scope">
              <el-input v-if="scope.row._edit_" v-model="scope.row.limits" :disabled="scope.row.disable && scope.row.name !== 'status'" placeholder="1:A,2:B或A,B" size="mini" clearable @change="chgLimits(scope.row)" />
              <div v-else>{{ scope.row.limits }}</div>
            </template>
          </el-table-column>
          <el-table-column label="列表显示" width="70px">
            <template slot-scope="scope">
              <el-switch v-if="scope.row._edit_" v-model="scope.row.listShow" :disabled="scope.row.disable && scope.row.name != 'status' && scope.row.name != 'version'" active-color="#13ce66" inactive-color="#ff4949" />
              <div v-else>{{ scope.row.listShow ? '是' : '否' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="表单显示" width="70px">
            <template slot-scope="scope">
              <el-switch v-if="scope.row._edit_" v-model="scope.row.formShow" :disabled="scope.row.disable && scope.row.name != 'status'" active-color="#13ce66" inactive-color="#ff4949" />
              <div v-else>{{ scope.row.formShow ? '是' : '否' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="表单必填" width="70px">
            <template slot-scope="scope">
              <el-switch v-if="scope.row._edit_" v-model="scope.row.required" :disabled="!scope.row.formShow" active-color="#13ce66" inactive-color="#ff4949" />
              <div v-else>{{ scope.row.required ? '是' : '否' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="控件类型" width="120px">
            <template slot="header">
              <el-tooltip content="这里选择[选择器]，请必须在[字段]中设置关联表" placement="top"><span>控件类型</span></el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-select v-if="scope.row._edit_" v-model="scope.row.formType" :disabled="!scope.row.formShow" placeholder="控件类型" size="mini" clearable>
                <el-option v-if="scope.row.type != 8 && scope.row.type != 11" :value="1" label="文本框" />
                <el-option v-if="scope.row.linkTableId || scope.row.formType == 2" :value="2" label="选择器" />
                <el-option v-if="scope.row.type == 11" :value="3" label="日期" />
                <el-option v-if="scope.row.type == 8" :value="4" label="日期时间" />
                <el-option v-if="scope.row.type >= 3 && scope.row.type <= 7" :value="5" label="数字" />
                <el-option v-if="(scope.row.type >= 2 && scope.row.type <= 4) " :value="13" label="选择配置" />
                <el-option v-if="(scope.row.type >= 2 && scope.row.type <= 4) || (scope.row.limits && scope.row.limits.length > 0)" :value="6" label="选择框" />
                <el-option v-if="scope.row.type >= 2 && scope.row.type <= 4" :value="7" label="多选" />
                <el-option v-if="scope.row.type == 1 || scope.row.type == 9 || scope.row.type == 10" :value="8" label="多行文本" />
                <el-option v-if="scope.row.type == 1 || scope.row.type == 9 || scope.row.type == 10" :value="9" label="富媒体" />
                <el-option v-if="scope.row.type == 1" :value="10" label="图片" />
                <el-option v-if="scope.row.type == 1" :value="11" label="文件" />
                <el-option v-if="scope.row.type == 1" :value="12" label="密文" />
              </el-select>
              <div v-else>
                <span v-if="scope.row.formType == 1">文本框</span>
                <span v-if="scope.row.formType == 2">选择器</span>
                <span v-if="scope.row.formType == 3">日期</span>
                <span v-if="scope.row.formType == 4">日期时间</span>
                <span v-if="scope.row.formType == 5">选择配置</span>
                <span v-if="scope.row.formType == 6">选择框</span>
                <span v-if="scope.row.formType == 7">多选</span>
                <span v-if="scope.row.formType == 8">多行文本</span>
                <span v-if="scope.row.formType == 9">富媒体</span>
                <span v-if="scope.row.formType == 10">图片</span>
                <span v-if="scope.row.formType == 11">文件</span>
                <span v-if="scope.row.formType == 12">密文</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="列表宽度" width="96px">
            <template slot-scope="scope">
              <el-input v-if="scope.row._edit_" v-model="scope.row.listWidth" :disabled="!scope.row.listShow" size="mini" clearable />
              <div v-else>{{ scope.row.listWidth }}</div>
            </template>
          </el-table-column>
          <el-table-column label="溢出缩短" width="70px">
            <template slot-scope="scope">
              <el-switch v-if="scope.row._edit_" v-model="scope.row.overflow" :disabled="!scope.row.listShow" active-color="#13ce66" inactive-color="#ff4949" />
              <div v-else>{{ scope.row.overflow ? '是' : '否' }}</div>
            </template>
          </el-table-column>

          <el-table-column label="最小/少" width="96px">
            <template slot-scope="scope">
              <el-input v-if="scope.row._edit_ && scope.row.type >= 3 && scope.row.type <= 7" v-model="scope.row.validMin" :disabled="scope.row.disable" size="mini" clearable />
              <div v-else>{{ scope.row.validMin }}</div>
            </template>
          </el-table-column>
          <el-table-column label="最大/多" width="96px">
            <template slot-scope="scope">
              <el-input v-if="scope.row._edit_ && scope.row.type >= 3 && scope.row.type <= 7" v-model="scope.row.validMax" :disabled="scope.row.disable" size="mini" clearable />
              <div v-else>{{ scope.row.validMax }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="90px" fixed="right">
            <template slot-scope="scope">
              <el-button-group>
                <el-button v-if="!scope.row._edit_" type="success" size="mini" @click="scope.row._edit_ = true">编辑</el-button>
                <el-button v-else type="primary" size="mini" @click="scope.row._edit_ = false">关闭</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="索引">
        <el-button size="small" type="primary" icon="el-icon-edit" @click="onAdd('indexList')">新增</el-button>
        <el-button size="small" type="success" icon="el-icon-edit" @click="onAllEdit(formData.indexList)">全部编辑</el-button>
        <br><br>
        <el-table v-loading="loading" :data="formData.indexList" element-loading-text="载入中..." size="mini" border fit highlight-current-row>
          <!-- <el-table-column :show-overflow-tooltip="true" align="center" prop="id" label="UUID" /> -->
          <el-table-column label="索引名称">
            <template slot-scope="scope">
              <el-input v-if="scope.row._edit_" v-model="scope.row.name" :disabled="scope.row.columns == 'id'" size="mini" clearable />
              <div v-else>{{ scope.row.name }}</div>
            </template>
          </el-table-column>
          <el-table-column label="索引字段">
            <template slot-scope="scope">
              <el-select v-if="scope.row._edit_" v-model="scope.row.columnArr" :disabled="scope.row.columns == 'id'" placeholder="索引字段" size="mini" style="width:100%" multiple>
                <el-option v-for="item in idxColumnList" :key="item" :label="item" :value="item" />
              </el-select>
              <div v-else>{{ scope.row.columnArr }}</div>
            </template>
          </el-table-column>
          <el-table-column label="索引类型" width="150px">
            <template slot-scope="scope">
              <el-select v-if="scope.row._edit_" v-model="scope.row.type" :disabled="scope.row.columns == 'id'" placeholder="字段类型" size="mini" clearable>
                <el-option :value="1" label="normal" />
                <el-option :value="2" label="unique" />
              </el-select>
              <div v-else>{{ scope.row.type == 2 ? 'unique' : 'normal' }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="145px">
            <template slot-scope="scope">
              <el-button v-if="!scope.row._edit_" type="success" size="mini" @click="scope.row._edit_ = true">编辑</el-button>
                <el-button v-else type="primary" size="mini" @click="scope.row._edit_ = false">关闭</el-button>
              <el-button :disabled="scope.row.columns == 'id'" type="danger" size="mini" @click="onDelete(formData.indexList, scope.$index)"><i class="el-icon-close" /></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="级联">
        <el-button size="small" type="primary" icon="el-icon-edit" @click="onAdd('linkList')">新增</el-button>
        <br><br>
        <el-table v-loading="loading" :data="formData.linkList" element-loading-text="载入中..." size="mini" border fit highlight-current-row>
          <el-table-column label="级联表">
            <template slot-scope="scope">
              <el-select v-model="scope.row.linkTableId" placeholder="级联表" size="mini" filterable clearable>
                <el-option v-for="item in tableList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="级联字段">
            <template slot-scope="scope">
              <my-select v-model="scope.row.linkColumnId" :params="{tableId: scope.row.linkTableId}" :width="180" bean="tpl.column" placeholder="级联字段" size="mini" />
            </template>
          </el-table-column>
          <el-table-column label="一对多">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isList" active-color="#13ce66" inactive-color="#ff4949" />
            </template>
          </el-table-column>
          <el-table-column label="级联保存">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.linkSave" active-color="#13ce66" inactive-color="#ff4949" />
            </template>
          </el-table-column>
          <el-table-column label="列表显示">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.listShow" active-color="#13ce66" inactive-color="#ff4949" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="65px">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.disable" type="danger" size="mini" @click="onDelete(formData.linkList, scope.$index)"><i class="el-icon-close" /></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <br>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="$router.push('/gen/table?projectId=' + projectId + '&moduleId=' + moduleId)">取消</el-button>
      <el-button :loading="loading" size="small" type="primary" @click="saveEvts">保存</el-button>
    </div>
  </div>
</template>

<script>
import api, { clearObject } from '@/api/service'
import mySelect from '@/views/compts/input'

export default {
  components: {
    mySelect
  },
  data() {
    return {
      mv: '0',
      showSpec: false,
      loading: false,
      table: {},
      editId: '',
      copyId: '',
      projectId: '',
      nameLk: '',
      formData: {},
      editForm: {
        rowCol: 2,
        isLog: false,
        isAutoId: true,
        isExport: false,
        isImport: false,
        hasStatus: true,
        hasVersion: true,
        hasCreateBy: false,
        hasUpdateBy: false,
        hasUpdateTime: true,
        columnList: null,
        indexList: null,
        linkList: []
      },
      moduleList: [{}],
      projectList: [],
      tableList: [{}],
      cln_id: {
        name: 'id',
        cmmt: 'UUID',
        type: 1,
        length: 32,
        orderNo: 1,
        queryType: 1,
        listShow: true,
        overflow: true,
        disable: true
      },
      cln_id_auto: {
        name: 'id',
        cmmt: '自增ID',
        type: 4,
        length: 8,
        orderNo: 1,
        formType: 5,
        queryType: 1,
        listShow: true,
        overflow: true,
        disable: true
      },
      cln_status: {
        name: 'status',
        cmmt: '状态',
        type: 3,
        length: 4,
        defVal: '1',
        limits: '1:正常,0:删除',
        listShow: true,
        required: false,
        disable: true
      },
      cln_version: {
        name: 'version',
        cmmt: '版本',
        type: 3,
        length: 8,
        defVal: '1',
        disable: true
      },
      cln_default: {
        type: 1,
        length: 64,
        formType: 1,
        formShow: true,
        listShow: true,
        notNull: true,
        unsigned: false,
        required: false,
        linkSave: false,
        defVal: '空',
        _edit_: true
      },
      idxColumnList: [],
      specialClnList: ['creator', 'creater', 'create_by', 'create_time', 'editor', 'edit_time', 'updator', 'update_by', 'update_time', 'status', 'version'],
      lengths: [4, 8, 16, 32, 64, 128, 255, 512, 1024, 2048],
      vues: ['vue', 'vben', 'restImpl', 'service', 'controller'], // pageReq
      valids: ['isInteger', 'isNumber', 'isFloat', 'isAlphabet', 'isLower', 'isUpper', 'isChinanes', 'isPhone', 'isIp', 'isHttp', 'isEmail', 'isCode', 'isIdNo', 'isPassword'],
    }
  },
  watch: {
    'formData.columnList'() {
      console.log('columnList', this.formData.columnList)
      this.idxColumnList = []
      if (this.formData.columnList) {
        this.idxColumnList = this.formData.columnList.map(v => { return v.name })
        this.onShow()
        if (this.formData.columnList[0].name !== 'id' && this.formData.indexList[0] && this.formData.indexList[0].columnArr[0]) {
          this.formData.indexList[0].columnArr[0] = this.formData.columnList[0].name
        }
      }
    },
    'showSpec'() {
      this.onShow()
    }
  },
  mounted() {
    this.mv = this.$route.query.mv ? this.$route.query.mv : '0'
    this.editId = this.$route.query.id ? this.$route.query.id : ''
    this.copyId = this.$route.query.copyId ? this.$route.query.copyId : ''
    this.projectId = this.$route.query.projectId ? this.$route.query.projectId : ''
    this.moduleId = this.$route.query.moduleId ? this.$route.query.moduleId : ''
    this.nameLk = this.$route.query.nameLk ? this.$route.query.nameLk : ''
    this.cln_id = this.setColumnProp(this.cln_id)
    this.cln_id_auto = this.setColumnProp(this.cln_id_auto)
    this.cln_status = this.setColumnProp(this.cln_status)
    this.cln_version = this.setColumnProp(this.cln_version)
    if (this.editId) {
      this.getListData(this.projectId, this.editId)
    } else if (this.mv === '2') {
      this.getModuleList(this.projectId)
      this.initImportSql()
    } else {
      this.getTableList(this.projectId)
      this.getModuleList(this.projectId)
      this.onEdit()
    }
  },
  methods: {
    showLink(row) {
      const name = row.name + ''
      return ((row.type == 1 && (name.endsWith('_id') || name.endsWith('_ids'))) || row.type == 4)
    },
    onShow() {
      this.formData.filterColumnList = this.formData.columnList
      // if (this.showSpec) {
      //   this.formData.filterColumnList = this.formData.columnList
      // } else {
      //   const filterArr = ['version', 'creater', 'creator', 'create_by', 'create_time', 'editor', 'edit_time', 'updator', 'update_by', 'update_time']
      //   this.formData.filterColumnList = this.formData.columnList.filter(v => filterArr.indexOf(v.name) === -1)
      // }
    },
    getListData(projectId, id) {
      this.loading = true
      api.getOne('tpl.table', id, 'columnList,indexList,linkList').then(res => {
        this.table = res.data[0]
        // 三个字段不可修改
        for (const column of this.table.columnList) {
          column['disable'] = column.name === 'id' || column.cmmt === '自增ID' || column.name === 'status' || column.name === 'version'
          column['_edit_'] = false
        }
        for (const indx of this.table.indexList) {
          indx['_edit_'] = false
        }
        this.getTableList(projectId)
        this.getModuleList(projectId)
        this.onEdit(this.table)
      })
    },
    getTableList(projectId) {
      this.loading = true
      api.getListPage('tpl.table', {
        pageSize: 300, showFields: 'id,name', params: { projectId: projectId }
      }).then(res => {
        this.tableList = res.data
        this.loading = false
      })
    },
    getModuleList(projectId) {
      this.loading = true
      api.getListPage('tpl.module', {
        pageSize: 100, showFields: 'id,name', showFlags: 'project[id,name]', params: { projectId: projectId }
      }).then(res => {
        this.loading = false
        for (const data of res.data) {
          data.name = (data.project ? data.project.name + ' / ' : '') + data.name
        }
        this.moduleList = res.data
        if (this.moduleId && !this.formData.moduleId) {
          this.formData.moduleId = Number(this.moduleId)
        }
      })
    },
    // 自增长ID或者自己填充ID
    changeAutoId() {
      const id = this.formData.columnList[0]['id']
      const cln = JSON.parse(JSON.stringify(this.formData.isAutoId ? this.cln_id_auto : this.cln_id))
      cln.id = id
      this.$set(this.formData.columnList, 0, cln)
    },
    chgType(row) {
      // console.log('chgType', row.type)
      row.unsigned = row.type >= 3 && row.type <= 7
      if (row.formShow && !row.disable) {
        // vue类型
        if (row.type === 2) {
          row.formType = 6
          console.log('chgType', row.type, row.formType)
        } else if (row.type === 8) {
          row.formType = 4
        } else if (row.type === 11) {
          row.formType = 3
        } else if (row.type >= 3 && row.type <= 7) {
          if ((row.type === 3 || row.type === 4) && row.linkTableId) {
            row.formType = 2
          } else {
            row.formType = 5
          }
        } else if (row.type === 9 || row.type === 10) {
          row.formType = 8
        } else if (row.type === 1 && row.linkTableId) {
          row.formType = 2
          row.length = 32
        } else {
          row.formType = 1
        }
        // 长度
        if (row.type === 2) {
          row.length = 1
        } else if (row.type === 8 || row.type === 9 || row.type === 10 || row.type === 11) {
          row.length = 0
        } else if (row.type >= 3 && row.type <= 7) {
          row.length = 8
        }
        // 默认值
        if (row.type === 1) {
          row.defVal = '空'
        } else if (row.type >= 2 && row.type <= 7) {
          row.defVal = 0
        } else if (row.type === 8) {
          row.defVal = 'NOW'
        } else if (row.type === 9 || row.type === 10) {
          row.defVal = null
        }
      }
    },
    chgLimits(row) {
      if (row.limits && row.limits.length > 0) {
        row.formType = 6
      }
    },
    chgLink(row) {
      if (row.linkTableId) {
        // row.type = 1
        row.formType = 2
        // row.length = 32
      } else {
        this.chgType(row)
      }
    },
    chgNull(row) {
      if (row.notNull) {
        this.chgType(row)
      } else {
        row.defVal = null
      }
    },
    chgStatus() {
      const index = this.formData.columnList.findIndex(v => v.name === 'status')
      if (this.formData.hasStatus && index === -1) {
        this.formData.columnList.push(this.cln_status)
      } else if (!this.formData.hasStatus && index > -1) {
        this.formData.columnList.splice(index, 1)
      }
    },
    chgVersion() {
      const index = this.formData.columnList.findIndex(v => v.name === 'version')
      if (this.formData.hasVersion && index === -1) {
        this.formData.columnList.push(this.cln_version)
      } else if (!this.formData.hasVersion && index > -1) {
        this.formData.columnList.splice(index, 1)
      }
    },
    onUp(list, index) {
      if (index > 0) {
        const temp = JSON.parse(JSON.stringify(list[index]))
        this.$set(list, index, list[index - 1])
        this.$set(list, index - 1, temp)
      }
    },
    onDown(list, index) {
      if (index < list.length - 1) {
        const temp = JSON.parse(JSON.stringify(list[index]))
        this.$set(list, index, list[index + 1])
        this.$set(list, index + 1, temp)
      }
    },
    onDelete(list, index) {
      list.splice(index, 1)
    },
    onOpenIndex() {
      this.$prompt('请输入第几行', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\d+/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        console.log('onOpenIndex', value)
        this.onAdd('columnList', value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    getAddIndex() {
      const index = this.formData.columnList.findIndex(v => this.specialClnList.indexOf(v.name) > -1)
      return index > -1 ? index : this.formData.columnList.length
    },
    onAdd(type, idx) {
      console.log('type=' + type, idx)
      if (type === 'columnList') {
        const index = idx ? idx : this.getAddIndex()
        this.formData.columnList.splice(index, 0, JSON.parse(JSON.stringify(this.cln_default)))
      } else if (type === 'indexList') {
        this.formData.indexList.push({
          columnArr: [],
          type: 1,
          _edit_: true
        })
      } else if (type === 'linkList') {
        if (!this.formData.linkList) {
          this.$set(this.formData, 'linkList', [])
        }
        this.formData.linkList.push({
          isList: true,
          listShow: true,
          linkSave: false
        })
      }
    },
    getIdCln(data, name) {
      const idCln = JSON.parse(JSON.stringify(data.isAutoId ? this.cln_id_auto : this.cln_id))
      idCln.name = name || idCln.name
      return idCln
    },
    initImportSql() {
      const sql = localStorage.getItem('importSql')
      this.loading = true
      api.newRequest('table', 'tableBySql', { sql }).then(res => {
        this.loading = false
        if (res.code === 200 && res.data) {
          this.onEdit(res.data)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(res => {
        this.loading = false
      })
    },
    onEdit(table) {
      this.formData = JSON.parse(JSON.stringify(!table ? this.editForm : table))
      if (!this.formData.columnList) {
        this.formData.columnList = []
        this.formData.columnList.push(this.getIdCln(this.formData))
        this.formData.columnList.push(JSON.parse(JSON.stringify(this.cln_default)))
        this.formData.columnList.push(JSON.parse(JSON.stringify(this.cln_status)))
        this.formData.columnList.push(JSON.parse(JSON.stringify(this.cln_version)))
      }
      if (!this.formData.indexList) {
        this.formData.indexList = [{
          name: 'idx_prikey',
          type: 1,
          columns: 'id',
          columnArr: ['id'],
          disable: true
        }]
      }
      if (this.mv === '1') {
        clearObject(this.formData, ['id', 'tableId', 'projectId', 'moduleId', 'linkTableId', 'linkList', 'project', 'module', 'creater', 'createTime', 'editor', 'editTime', 'status', 'statusText', 'version'])
        // 修复之前写法 ix_prikey => idx_prikey
        const prikeyIndex = this.formData.indexList.findIndex(v => v.name === 'ix_prikey')
        if (prikeyIndex > -1) {
          this.formData.indexList[prikeyIndex]['name'] = 'idx_prikey'
        }
      }
      const statusIndex = this.formData.columnList.findIndex(v => v.name === 'status')
      const versionIndex = this.formData.columnList.findIndex(v => v.name === 'version')
      if (this.mv === '1' || this.mv === '2') {
        this.formData.hasStatus = statusIndex > -1
        this.formData.hasVersion = versionIndex > -1
        this.formData.hasCreateBy = this.formData.columnList.findIndex(v => v.name === 'create_by') > -1
        this.formData.hasUpdateBy = this.formData.columnList.findIndex(v => v.name === 'update_by') > -1
        this.formData.hasUpdateTime = this.formData.columnList.findIndex(v => v.name === 'update_time') > -1
      }
      if (this.mv === '2') {
        // 下面影响indexList
        // clearObject(this.formData, ['id', 'creater', 'createTime', 'editor', 'editTime', 'status', 'statusText', 'version'])
        const idCln = this.formData.columnList[0]
        this.formData.isAutoId = idCln.type === 3 || idCln.type === 4
        this.formData.columnList.splice(0, 1, this.getIdCln(this.formData, idCln.name))
        if (this.formData.hasStatus) {
          const newStatus = JSON.parse(JSON.stringify(this.cln_status))
          newStatus.type = this.formData.columnList[statusIndex].type
          newStatus.length = this.formData.columnList[statusIndex].length
          newStatus.limits = this.formData.columnList[statusIndex].limits
          this.formData.columnList.splice(statusIndex, 1, newStatus)
        }
        if (this.formData.hasVersion) {
          this.formData.columnList.splice(versionIndex, 1, JSON.parse(JSON.stringify(this.cln_version)))
        }
      }
      this.formData.indexList.forEach(data => {
        this.$set(data, 'columnArr', data.columns ? data.columns.split(',') : [])
      })
      this.$set(this.formData, 'genFileArr', this.formData.genFiles ? this.formData.genFiles.split(',') : [])
    },
    saveEvts() {
      this.saveOne(this.formData, '保存')
    },
    saveOne(argData, title) {
      const data = JSON.parse(JSON.stringify(argData))
      if (!data.moduleId) {
        this.$message.error('请选择项目和模块！')
        return
      }
      this.loading = true
      delete data.filterColumnList
      data.projectId = this.projectId
      data.indexList.forEach(v => {
        v.columns = v.columnArr.join(',')
      })
      data.columnList.forEach(v => {
        v.projectId = this.projectId
        if (!v.queryType || v.queryType === '') {
          v.queryType = 0
        }
        console.log('v.linkTableId', v.linkTableId)
        if (!v.linkTableId || v.linkTableId === '') {
          v.linkTableId = 0
        }
      })
      data.genFiles = data.genFileArr.join(',')
      delete data.genFileArr
      // console.log('data', data)
      api.saveOne('tpl.table', data).then(res => {
        api.success(this, title).then(that => {
          that.$router.push('/gen/table?projectId=' + this.projectId + '&moduleId=' + this.moduleId)
        })
      }).catch(() => {
        this.loadings = []
        this.loading = false
      })
    },
    setColumnProp(cln) {
      const addProp = { formShow: false, listShow: false, notNull: true, unsigned: true, required: false }
      for (const key in addProp) {
        if (cln[key] === undefined) {
          cln[key] = addProp[key]
        }
      }
      return cln
    },
    getTableName(tableList, id) {
      if (!tableList || !id) return ''
      const table = tableList.findLast(v => v.id === id)
      return table && table.name ? table.name : ''
    },
    onAllEdit(list) {
      for (const column of list) {
        if (['id', 'status', 'version', 'create_by', 'create_time', 'update_by', 'update_time'].findIndex(v => v === column.name) === -1) {
          this.$set(column, '_edit_', true)
        }
      }
    }
  }
}
</script>
